<template>
  <div class="login-container" v-loading="loading" element-loading-text="登录中..." element-loading-background="rgba(0, 0, 0, 0.7)">
    <!-- 顶部导航区域 -->
    <div class="login-header">
      <div class="header-text">数智品诉定标平台</div>
    </div>

    <!-- 主要内容区域 -->
    <div class="login-content">
      <!-- 居中的登录表单区域 -->
      <div class="login-wrapper">
        <div class="login-form">
          <h2>登录</h2>
          <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="0">
            <el-form-item label="" prop="username">
              <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="账户"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-unlock" show-password
                placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleLogin" type="primary" class="login-btn">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogin, getUserRole } from '../api/user'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      loading: false // 登录请求loading状态
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 开始请求前显示loading
          this.loading = true
          userLogin(this.loginForm).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.msg, 500)
              localStorage.setItem('token', res.token)
              localStorage.setItem('username', this.loginForm.username)

              // 先获取角色信息，再进行路由跳转
              getUserRole().then((roleRes) => {
                if (roleRes.code === 200) {
                  localStorage.setItem('DzRoles', roleRes.data[0])
                  // 只有在角色信息成功存储后才跳转路由
                  // this.$router.push('/dashboard')
                  const userRole = localStorage.getItem('DzRoles')
                  if (userRole === 'guest') {
                    // 修改为只在根路径时才重定向
                    this.$router.push('/userManagement')
                  } else if (userRole === 'admin') {
                    // admin用户重定向到dashboard
                    this.$router.push('/dashboard')
                  } else if (userRole === 'enterprise') {
                    // 修改为只在根路径时才重定向
                    this.$router.push('/userManagement')
                  }
                } else {
                  this.$message.error(roleRes.msg)
                  // console.log(roleRes.msg, "获取角色的接口")
                }
              }).catch((err) => {
                this.$message.error(err.message)
                // console.log(err.message)
              }).finally(() => {
                // 无论成功失败都隐藏loading
                this.loading = false
              })
            } else {
              this.$message.error(res.msg)
              // console.log(res.msg)
              // 请求失败时隐藏loading
              this.loading = false
            }
          }).catch((err) => {
            // this.$message.error(err.message)
            console.log(err.message)
            // 请求异常时隐藏loading
            this.loading = false
          })
        } else {
          this.$message.error('请填写完整的登录信息')
          return false
        }
      })
    },

  }
}
</script>

<style scoped>
/* 全屏背景容器 */
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* 顶部导航区域 - 移除可能影响背景色的样式 */
.login-header {
  height: 93px;
  background-image: url('../assets/img/login/topnav.png');
  background-color: #011640;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
  /* 确保没有额外的背景色干扰 */
}

/* 主要内容区域 - 调整或移除覆盖层 */
.login-content {
  flex: 1;
  background-image: url('../assets/img/login/loginbgc.png');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* 确保没有额外的背景色干扰 */
  background-color: transparent;
}

/* 移除或调整覆盖层 */
.login-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 要么完全移除覆盖层 */
  /* display: none; */

  /* 要么降低透明度以减少对背景颜色的影响 */
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* 顶部文字样式 */
.header-text {
  font-weight: 500;
  font-size: 34px;
  line-height: 34px;
  color: white;
  text-align: center;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
}

/* 居中的登录表单包装器 - 修改为固定大小并添加背景图片 */
.login-wrapper {
  position: relative;
  z-index: 2;
  /* 设置固定大小 */
  width: 600px;
  height: 384px;
  /* 添加背景图片 */
  background-image: url('../assets/img/login/loginkuang.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 调整登录表单容器，确保内容在背景框内正确显示 */
.login-form {
  width: 100%;
  padding: 60px 50px;
  /* 移除背景色和边框，让背景图片可见 */
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
}

/* 响应式设计：在小屏幕上调整布局 */
@media (max-width: 768px) {
  .login-wrapper {
    width: 90%;
    height: auto;
    min-height: 384px;
  }

  .login-form {
    padding: 40px 30px;
  }
}

.login-form h2 {
  text-align: center;
  margin-bottom: 40px;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  /* 保持文字位置正常 */
  position: relative;
  padding-bottom: 0;
  /* margin-bottom: 120px;  */
}

/* 使用伪元素显示背景图，避免影响文字布局 */
.login-form h2::after {
  content: '';
  position: absolute;
  /* bottom: -110px;  */
  left: 50%;
  transform: translateX(-50%);
  /* 使用图片实际尺寸 */
  width: 189px;
  height: 100px;
  background-image: url('../assets/img/login/flash.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 为表单中的每个输入框项添加倾斜的容器效果 */
::v-deep .el-form-item {
  position: relative;
}

/* 调整输入框容器，保持其尺寸和定位 */
::v-deep .el-input {
  position: relative;
  overflow: visible;
  /* 确保图标不被裁剪 */
  /* 为伪元素预留空间 */
  height: 48px;
}

/* 创建倾斜的背景效果，不影响内部文字 */
::v-deep .el-input::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 设置渐变背景 */
  background: linear-gradient(90deg, #013B80 0%, rgba(0, 163, 255, 0) 100%);
  /* 设置圆角 */
  border-radius: 6px;
  /* 关键：应用倾斜效果到背景 */
  transform: skew(-15deg);
  z-index: 0;
}

/* 为输入框本身设置样式，确保文字正常显示 */
::v-deep .el-input__inner {
  border-radius: 6px;
  height: 48px;
  font-size: 14px;
  /* 透明背景，使用伪元素的背景 */
  background: transparent;
  /* 设置文字颜色为白色 */
  color: #fff;
  /* 移除边框 */
  border: none;
  /* 为前缀图标留出足够空间 */
  padding-left: 40px;
  /* 为后缀图标留出空间 */
  padding-right: 30px;
  /* 确保文字正常显示 */
  transform: none;
  position: relative;
  z-index: 1;
  /* 确保文字在背景之上 */
}

/* 输入框聚焦时的样式 */
::v-deep .el-input__inner:focus {
  /* 透明背景，使用伪元素的背景 */
  background: transparent;
  /* 保持无边框 */
  border: none;
  /* 调整聚焦时的阴影效果 */
  /* box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.2); */
}

/* 聚焦时调整伪元素样式 */
::v-deep .el-input:focus-within::after {
  /* 聚焦时可以保持相同的渐变背景或稍微调整 */
  background: linear-gradient(90deg, #013B80 0%, rgba(0, 163, 255, 0) 100%);
}

/* 修改输入框占位符颜色为完全不透明的白色 */
::v-deep .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 1);
}

/* 兼容不同浏览器的占位符样式 */
::v-deep .el-input__inner:-ms-input-placeholder {
  color: rgba(255, 255, 255, 1);
}

::v-deep .el-input__inner::-ms-input-placeholder {
  color: rgba(255, 255, 255, 1);
}

/* 调整输入框中的前缀图标，确保它们不被裁剪且位置正确 */
::v-deep .el-input__prefix {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  /* 前缀图标不需要倾斜，因为它在倾斜容器外部定位 */
}

/* 调整输入框中的后缀图标（如显示密码按钮） */
::v-deep .el-input__suffix {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  /* 后缀图标不需要倾斜 */
}

/* 确保图标本身也不倾斜 */
::v-deep .el-input__icon {
  color: #fff;
  font-size: 18px;
}

/* 增加表单项之间的间距 */
::v-deep .el-form-item {
  margin-bottom: 28px;
}

/* 登录按钮样式 */
::v-deep .login-btn {
  width: 534px;
  height: 50px;
  background: linear-gradient(180deg, rgba(3, 55, 123, 1) 0%, rgba(0, 135, 255, 0.52) 100%);
  border-radius: 0;
  border: 1px solid;
  border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
  font-size: 16px;
  font-weight: 500;
  color: white;
  /* 添加与输入框一致的倾斜效果 */
  transform: skew(-15deg);
}

::v-deep .login-btn span {
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
font-weight: 500;
font-size: 20px;
color: #FFFFFF;
  transform: skew(15deg);
  display: inline-block; /* 确保transform生效 */
  transform-origin: center;
}

/* 登录按钮悬停状态 */
::v-deep .login-btn:hover {
  background: linear-gradient(180deg, rgba(0, 135, 255, 0.35) 0%, rgba(0, 135, 255, 0.62) 100%);
  border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
  /* 保持倾斜效果 */
  transform: skew(-15deg);
}

/* 登录按钮点击状态 */
::v-deep .login-btn:active {
  background: linear-gradient(180deg, rgba(0, 135, 255, 0.45) 0%, rgba(0, 135, 255, 0.72) 100%);
  border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
  /* 保持倾斜效果 */
  transform: skew(-15deg);
  border: 1px solid rgba(44, 223, 232, 1);
}

/* 响应式设计：在小屏幕上调整按钮大小 */
@media (max-width: 768px) {
  ::v-deep .login-btn {
    width: 100%;
    max-width: 534px;
    /* 在小屏幕上保持倾斜效果 */
    transform: skew(-15deg);
  }
}

.login-form {
  width: 100%;
  padding: 40px 30px;
}

.header-text {
  font-size: 20px;
}
</style>